<template>
  <div class="module-card">
    <div class="module-header">
      <h3>部门简介管理</h3>
      <div class="header-actions">
        <button 
          @click="toggleEditMode"
          v-if="!isEditing"
          class="btn-primary"
        >
          <i class="icon-edit"></i> 编辑简介
        </button>
        <div v-else class="edit-actions">
          <button 
            @click="saveDepartmentIntro"
            :disabled="saving"
            class="btn-primary"
          >
            {{ saving ? '保存中...' : '保存' }}
          </button>
          <button 
            @click="cancelEdit"
            class="btn-secondary"
          >
            取消
          </button>
        </div>
      </div>
    </div>
    
    <!-- 部门简介内容 -->
    <div class="department-intro-content">
      <!-- 部门封面图 -->
      <div class="cover-image-container">
        <div v-if="isEditing" class="image-upload-area">
          <input 
            type="file" 
            ref="fileInput"
            accept="image/*"
            @change="handleImageUpload"
            class="file-input"
          />
          <div class="upload-placeholder" @click="$refs.fileInput.click()">
            <i class="icon-plus-circle"></i>
            <p>点击上传封面图</p>
            <span class="upload-tip">支持JPG、PNG格式，建议尺寸1920×300px</span>
          </div>
          <img 
            v-if="tempCoverImageUrl" 
            :src="tempCoverImageUrl"
            alt="封面图预览"
            class="preview-image"
          />
          <button 
            v-if="tempCoverImageUrl" 
            @click="removeTempImage"
            class="remove-image-btn"
          >
            <i class="icon-times-circle"></i>
          </button>
        </div>
        <img 
          v-else-if="coverImageUrl" 
          :src="coverImageUrl"
          alt="部门封面图"
          class="cover-image"
        />
        <div v-else class="cover-image-placeholder">
          <i class="icon-building-o"></i>
          <p>暂无封面图</p>
        </div>
      </div>
      
      <!-- 部门信息 -->
      <div class="department-info">
        <div class="info-header">
          <h2>{{ departmentName }}</h2>
          <div class="department-meta">
            <span class="meta-item">
              <i class="icon-users"></i> {{ memberCount }} 位成员
            </span>
            <span class="meta-item">
              <i class="icon-calendar"></i> 成立于 {{ establishmentDate }}
            </span>
          </div>
        </div>
        
        <!-- 简介内容 -->
        <div class="intro-description" v-if="!isEditing">
          <div v-if="departmentIntro.description" v-html="formatDescription(departmentIntro.description)"></div>
          <div v-else class="empty-description">
            <i class="icon-file-text-o"></i>
            <p>暂无部门简介内容</p>
          </div>
        </div>
        <div v-else>
          <textarea 
            v-model="tempDepartmentIntro.description"
            placeholder="请输入部门简介..."
            class="description-textarea"
            rows="12"
          ></textarea>
        </div>
      </div>
      
      <!-- 部门职责与分工 -->
      <div class="department-roles" v-if="!isEditing">
        <h3><i class="icon-tasks"></i> 部门职责与分工</h3>
        <div v-if="departmentIntro.roles && departmentIntro.roles.length > 0" class="roles-list">
          <div 
            v-for="role in departmentIntro.roles" 
            :key="role.id"
            class="role-item"
          >
            <div class="role-title">{{ role.title }}</div>
            <div class="role-description" v-html="formatDescription(role.description)"></div>
          </div>
        </div>
        <div v-else class="empty-roles">
          <i class="icon-list-ul"></i>
          <p>暂无部门职责信息</p>
        </div>
      </div>
      
      <!-- 编辑模式下的职责管理 -->
      <div v-if="isEditing">
        <h3><i class="icon-tasks"></i> 部门职责与分工</h3>
        <div class="roles-editor">
          <div 
            v-for="(role, index) in tempDepartmentIntro.roles" 
            :key="index"
            class="role-editor-item"
          >
            <div class="form-group">
              <label>职责名称</label>
              <input 
                v-model="role.title"
                type="text"
                placeholder="输入职责名称"
                class="form-input"
              />
            </div>
            <div class="form-group">
              <label>职责描述</label>
              <textarea 
                v-model="role.description"
                placeholder="详细描述该职责的内容..."
                class="description-textarea"
                rows="4"
              ></textarea>
            </div>
            <button 
              @click="removeRole(index)"
              class="remove-role-btn"
              :disabled="tempDepartmentIntro.roles.length <= 1"
            >
              <i class="icon-trash-o"></i>
            </button>
          </div>
          <button 
            @click="addRole"
            class="add-role-btn"
          >
            <i class="icon-plus"></i> 添加职责
          </button>
        </div>
      </div>
    </div>
    
    <!-- 图片预览弹窗 -->
    <div class="modal-overlay" v-if="showImagePreview" @click="closeImagePreview">
      <div class="modal-content image-preview-modal" @click.stop>
        <img :src="previewImageUrl" alt="预览" class="preview-full-image" />
        <button @click="closeImagePreview" class="close-preview-btn">&times;</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'

// 状态管理
const departmentIntro = ref({
  id: 5,
  name: '办公室',
  description: '',
  roles: [],
  coverImage: '',
  memberCount: 0,
  establishmentDate: ''
})

const tempDepartmentIntro = ref({})
const isEditing = ref(false)
const saving = ref(false)
const showImagePreview = ref(false)
const previewImageUrl = ref('')
const tempCoverImageUrl = ref('')
const originalData = ref({})
const departmentName = ref('办公室')
const memberCount = ref(0)
const establishmentDate = ref('')

// 计算属性：格式化的封面图URL
const coverImageUrl = computed(() => {
  if (tempCoverImageUrl.value) {
    return tempCoverImageUrl.value
  }
  if (departmentIntro.value.coverImage) {
    return departmentIntro.value.coverImage.startsWith('http') 
      ? departmentIntro.value.coverImage 
      : `http://localhost:8080${departmentIntro.value.coverImage}`
  }
  return ''
})

// 获取部门简介
const fetchDepartmentIntro = async () => {
  try {
    const response = await fetch('http://localhost:8080/department/5')
    const result = await response.json()
    
    if (result.code === 200) {
      departmentIntro.value = result.data
      departmentName.value = result.data.name || '办公室'
      memberCount.value = result.data.memberCount || 0
      establishmentDate.value = result.data.establishmentDate || '2023-01-01'
      
      // 初始化本地备份
      originalData.value = JSON.parse(JSON.stringify(result.data))
    } else {
      console.error('获取部门简介失败:', result.message)
      showToast('获取部门简介失败', 'error')
      // 使用默认数据
      initializeDefaultData()
    }
  } catch (error) {
    console.error('获取部门简介失败:', error)
    showToast('无法连接到服务器，使用本地数据', 'warning')
    // 尝试从本地存储加载
    loadLocalBackup()
  }
}

// 初始化默认数据
const initializeDefaultData = () => {
  const defaultData = {
    id: 5,
    name: '办公室',
    description: '',
    roles: [],
    coverImage: '',
    memberCount: 0,
    establishmentDate: new Date().toISOString().split('T')[0]
  }
  departmentIntro.value = defaultData
  originalData.value = JSON.parse(JSON.stringify(defaultData))
}

// 加载本地备份
const loadLocalBackup = () => {
  try {
    const backup = localStorage.getItem('departmentIntro_5')
    if (backup) {
      const parsedBackup = JSON.parse(backup)
      departmentIntro.value = parsedBackup
      departmentName.value = parsedBackup.name || '办公室'
      memberCount.value = parsedBackup.memberCount || 0
      establishmentDate.value = parsedBackup.establishmentDate || '2023-01-01'
      originalData.value = JSON.parse(JSON.stringify(parsedBackup))
    } else {
      initializeDefaultData()
    }
  } catch (error) {
    console.error('加载本地备份失败:', error)
    initializeDefaultData()
  }
}

// 保存本地备份
const saveLocalBackup = () => {
  try {
    localStorage.setItem('departmentIntro_5', JSON.stringify(departmentIntro.value))
  } catch (error) {
    console.error('保存本地备份失败:', error)
  }
}

// 切换编辑模式
const toggleEditMode = () => {
  isEditing.value = true
  // 创建临时副本用于编辑
  tempDepartmentIntro.value = JSON.parse(JSON.stringify(departmentIntro.value))
}

// 取消编辑
const cancelEdit = () => {
  if (hasUnsavedChanges()) {
    if (!confirm('有未保存的更改，确定要取消吗？')) {
      return
    }
  }
  isEditing.value = false
  tempDepartmentIntro.value = {}
  tempCoverImageUrl.value = ''
}

// 检查是否有未保存的更改
const hasUnsavedChanges = () => {
  if (!isEditing.value) return false
  
  // 比较描述
  if (tempDepartmentIntro.value.description !== departmentIntro.value.description) {
    return true
  }
  
  // 比较职责列表
  if (tempDepartmentIntro.value.roles.length !== departmentIntro.value.roles.length) {
    return true
  }
  
  // 比较每个职责
  for (let i = 0; i < tempDepartmentIntro.value.roles.length; i++) {
    const tempRole = tempDepartmentIntro.value.roles[i]
    const originalRole = departmentIntro.value.roles[i]
    if (tempRole.title !== originalRole.title || tempRole.description !== originalRole.description) {
      return true
    }
  }
  
  // 检查是否有新上传的图片
  return !!tempCoverImageUrl.value
}

// 保存部门简介
const saveDepartmentIntro = async () => {
  saving.value = true
  try {
    // 准备表单数据
    const formData = new FormData()
    formData.append('id', tempDepartmentIntro.value.id)
    formData.append('name', tempDepartmentIntro.value.name || '办公室')
    formData.append('description', tempDepartmentIntro.value.description)
    formData.append('roles', JSON.stringify(tempDepartmentIntro.value.roles))
    formData.append('establishmentDate', tempDepartmentIntro.value.establishmentDate || establishmentDate.value)
    formData.append('departmentId', 5)
    
    // 如果有新上传的图片，添加到表单数据
    if (tempCoverImageUrl.value) {
      const blob = await fetch(tempCoverImageUrl.value).then(r => r.blob())
      formData.append('coverImage', blob, 'cover.jpg')
    }
    
    // 发送请求
    const response = await fetch('http://localhost:8080/department/update', {
      method: 'POST',
      body: formData
    })
    
    const result = await response.json()
    if (result.code === 200) {
      // 更新本地数据
      departmentIntro.value = result.data
      tempCoverImageUrl.value = ''
      isEditing.value = false
      
      // 保存到本地存储
      saveLocalBackup()
      
      showToast('部门简介保存成功', 'success')
    } else {
      console.error('保存部门简介失败:', result.message)
      showToast('保存失败：' + result.message, 'error')
      
      // 尝试保存到本地存储
      const updatedData = {
        ...departmentIntro.value,
        description: tempDepartmentIntro.value.description,
        roles: tempDepartmentIntro.value.roles,
        coverImage: tempCoverImageUrl.value || departmentIntro.value.coverImage
      }
      departmentIntro.value = updatedData
      saveLocalBackup()
      tempCoverImageUrl.value = ''
      isEditing.value = false
      
      showToast('已保存到本地，请稍后同步到服务器', 'warning')
    }
  } catch (error) {
    console.error('保存部门简介失败:', error)
    showToast('保存失败，请检查网络连接', 'error')
    
    // 尝试保存到本地存储
    try {
      const updatedData = {
        ...departmentIntro.value,
        description: tempDepartmentIntro.value.description,
        roles: tempDepartmentIntro.value.roles,
        coverImage: tempCoverImageUrl.value || departmentIntro.value.coverImage
      }
      departmentIntro.value = updatedData
      saveLocalBackup()
      tempCoverImageUrl.value = ''
      isEditing.value = false
      
      showToast('已保存到本地，请稍后同步到服务器', 'warning')
    } catch (localError) {
      console.error('保存到本地存储失败:', localError)
    }
  } finally {
    saving.value = false
  }
}

// 处理图片上传
const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 检查文件类型
    if (!file.type.match('image/jpeg') && !file.type.match('image/png')) {
      showToast('请上传JPG或PNG格式的图片', 'warning')
      return
    }
    
    // 检查文件大小（5MB）
    if (file.size > 5 * 1024 * 1024) {
      showToast('图片大小不能超过5MB', 'warning')
      return
    }
    
    // 读取文件并显示预览
    const reader = new FileReader()
    reader.onload = (e) => {
      tempCoverImageUrl.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 移除临时图片
const removeTempImage = () => {
  tempCoverImageUrl.value = ''
  // 重置文件输入
  if (this.$refs.fileInput) {
    this.$refs.fileInput.value = ''
  }
}

// 添加职责
const addRole = () => {
  tempDepartmentIntro.value.roles.push({
    title: '',
    description: ''
  })
}

// 移除职责
const removeRole = (index) => {
  if (tempDepartmentIntro.value.roles.length <= 1) {
    showToast('至少保留一项职责', 'warning')
    return
  }
  tempDepartmentIntro.value.roles.splice(index, 1)
}

// 预览图片
const previewImage = (imageUrl) => {
  previewImageUrl.value = imageUrl
  showImagePreview.value = true
}

// 关闭图片预览
const closeImagePreview = () => {
  showImagePreview.value = false
  previewImageUrl.value = ''
}

// 格式化描述文本（将换行转换为<br>）
const formatDescription = (text) => {
  if (!text) return ''
  // 保留原有的换行，并处理段落间的空行
  return text
    .replace(/\n\n+/g, '<br><br>')
    .replace(/\n/g, '<br>')
}

// 显示提示信息
const showToast = (message, type = 'info') => {
  // 这里可以根据实际项目中的toast组件来实现
  alert(message)
}

// 监听编辑模式变化，自动保存临时数据
watch(isEditing, (newValue) => {
  if (!newValue) {
    tempCoverImageUrl.value = ''
  }
})

// 组件挂载时获取部门简介
onMounted(() => {
  fetchDepartmentIntro()
  
  // 监听页面关闭事件，提示保存
  window.addEventListener('beforeunload', (event) => {
    if (isEditing.value && hasUnsavedChanges()) {
      event.preventDefault()
      event.returnValue = '有未保存的更改，确定要离开吗？'
    }
  })
})

// 组件卸载时清理事件监听
onUnmounted(() => {
  window.removeEventListener('beforeunload', () => {})
})
</script>

<style>
/* 全局模块容器样式 */
.module-card {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.module-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.edit-actions {
  display: flex;
  gap: 12px;
}

/* 按钮样式 */
.btn-primary {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover:not(:disabled) {
  background: #66b1ff;
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

/* 部门简介内容 */
.department-intro-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 封面图容器 */
.cover-image-container {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cover-image:hover {
  transform: scale(1.02);
}

.cover-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.cover-image-placeholder i {
  font-size: 48px;
  margin-bottom: 12px;
}

.cover-image-placeholder p {
  font-size: 16px;
}

/* 图片上传区域 */
.image-upload-area {
  position: relative;
  width: 100%;
  height: 100%;
}

.file-input {
  display: none;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.upload-placeholder:hover {
  background: #ecf5ff;
  border-color: #409eff;
}

.upload-placeholder i {
  font-size: 48px;
  color: #909399;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.upload-placeholder:hover i {
  color: #409eff;
}

.upload-placeholder p {
  font-size: 16px;
  color: #606266;
  margin: 0 0 4px 0;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
}

.preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(245, 108, 108, 0.9);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  z-index: 10;
}

.remove-image-btn:hover {
  background: #f56c6c;
  transform: scale(1.1);
}

/* 部门信息 */
.department-info {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
}

.info-header {
  margin-bottom: 24px;
}

.info-header h2 {
  font-size: 32px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.department-meta {
  display: flex;
  gap: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

/* 简介描述 */
.intro-description {
  line-height: 1.8;
  color: #333;
  font-size: 16px;
}

.intro-description p {
  margin: 0 0 16px 0;
}

.intro-description h4 {
  margin: 24px 0 12px 0;
  color: #409eff;
  font-size: 18px;
}

.empty-description {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.empty-description i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-description p {
  font-size: 16px;
}

/* 部门职责 */
.department-roles {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
}

.department-roles h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.roles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.role-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.role-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.role-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.role-description {
  line-height: 1.6;
  color: #666;
  font-size: 14px;
}

.empty-roles {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.empty-roles i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-roles p {
  font-size: 16px;
}

/* 编辑模式下的职责编辑器 */
.roles-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.role-editor-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.description-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.description-textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.remove-role-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f7fa;
  color: #909399;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.remove-role-btn:hover:not(:disabled) {
  background: #f56c6c;
  color: white;
}

.remove-role-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-role-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px dashed #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-role-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

/* 图片预览弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content.image-preview-modal {
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 90%;
  max-height: 90%;
}

.preview-full-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.close-preview-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-preview-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .roles-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .module-card {
    padding: 20px;
    margin: 16px;
  }
  
  .module-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .header-actions {
    align-self: stretch;
    justify-content: flex-end;
  }
  
  .cover-image-container {
    height: 200px;
  }
  
  .info-header h2 {
    font-size: 24px;
  }
  
  .department-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .intro-description {
    font-size: 14px;
  }
  
  .modal-content.image-preview-modal {
    max-width: 95%;
    max-height: 95%;
  }
  
  .close-preview-btn {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .cover-image-container {
    height: 150px;
  }
  
  .department-info,
  .department-roles {
    padding: 16px;
  }
  
  .role-editor-item {
    padding: 16px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.department-intro-content > * {
  animation: fadeIn 0.5s ease-out;
}

/* 滚动条样式 */
.description-textarea::-webkit-scrollbar {
  width: 6px;
}

.description-textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.description-textarea::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.description-textarea::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>